<template>

  <view class="i-button d-flex align-center justify-space-between px-4">
    <view class="d-flex align-center">
      <u-icon :name="iconLeft" size="22px"></u-icon>
      <view class="text pl-3"  size="22px"> {{ text }}</view>
    </view>
    <u-icon :name="iconRight"></u-icon>
  </view>

</template>

<script>

export default {
  props: {
    text: {
      type: String,
      default: ''
    },
    iconLeft: String,
    iconRight: {
      type: String,
      default: 'arrow-right'
    }
  }
}
</script>

<style scoped lang="scss">
.i-button {

  border-bottom: 1px #dcdfe6 solid;
  color: #555555;
  height: 48px;
  line-height: 48px;

  &:active {
    background-color: #dcdfe6;
  }
}

</style>
